<template>
  <div>
    <div style="display: flex; justify-content: flex-start">
      <el-input
        placeholder="通过标题搜索该分类下的文章..."
        prefix-icon="el-icon-search"
        v-model="keywords"
        style="width: 400px"
        size="medium"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        style="margin-left: 3px"
        @click="searchClick(keywords)"
        >搜索
      </el-button>
    </div>
    <!--<div style="width: 100%;height: 1px;background-color: #20a0ff;margin-top: 8px;margin-bottom: 0px"></div>-->
    <el-table
      ref="multipleTable"
      :data="articles"
      tooltip-effect="dark"
      style="width: 100%; overflow-x: hidden; overflow-y: hidden"
      max-height="390"
      v-loading="loading"
    >
      <el-table-column
        type="selection"
        width="35"
        align="left"
        v-if="showEdit || showDelete"
      >
      </el-table-column>
      <el-table-column label="标题" width="300px" align="left">
        <template slot-scope="scope"
          ><span style="color: #409eff; cursor: pointer">{{
            scope.row.title
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200" align="left">
        <template slot-scope="scope">{{ scope.row.creatime }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200"
        v-if="showEdit || showDelete"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            v-if="showEdit"
            >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            v-if="showDelete"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="blog_table_footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="5"
        layout="total, sizes, prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  findPageBen,
  findPageYan,
  findPage,
  result1,
  briefinfo,
  comdel,
  resdel,
  bendel,
  yandel,
} from "@/api/apis.js";
export default {
  data() {
    return {
      articles: [],
      selItems: [],
      loading: false,
      pageSize: 5,
      keywords: "",
      currentPage: 1,
      total: 1,
    };
  },
  props: ["state", "showEdit", "showDelete", "activeName"],
  mounted() {
    // console.log(this.state);
    if (this.state == 0) {
      this.refresh3();
    }
    if (this.state == -1) {
      this.refresh1();
    }
    if (this.state == 2) {
      this.refresh4();
    }
    if (this.state == 1) {
      this.refresh2();
    }
    // 中心概括
    if (this.state == -2) {
      this.refresh5();
    }
    // console.log(this.activeName)
  },
  methods: {
    searchClick(keywords) {
      this.keywords = keywords;
      // console.log(this.keywords)
      if (this.state == 0) {
        this.refresh3(this.keywords);
      }

      if (this.state == 2) {
        this.refresh4(this.keywords);
      }

      // 合作交流
      if (this.state == -1) {
        this.refresh1(this.keywords);
      }
      // 项目成果
      if (this.state == 1) {
        this.refresh2(this.keywords);
      }
      // 中心概括
      if (this.state == -2) {
        this.refresh5(this.keywords);
      }
    },
    // 本科生请求封装
    refresh3() {
      this.loading = true;
      findPageBen(this.pageSize, this.currentPage, this.keywords).then(
        (res) => {
          // console.log(res);
          this.articles = res.data.data.records;
          this.total = res.data.data.total;
          // console.log(this.articles);
          // console.log(this.total);
          this.loading = false;
        }
      );
    },
    // 研究生请求封装
    refresh4() {
      this.loading = true;
      findPageYan(this.pageSize, this.currentPage, this.keywords).then(
        (res) => {
          // console.log(res);
          this.articles = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        }
      );
    },
    // 合作交流请求封装
    refresh1() {
      this.loading = true;
      findPage(this.pageSize, this.currentPage, this.keywords).then((res) => {
        // console.log(res);
        this.articles = res.data.data.records;
        this.total = res.data.data.total;
        this.loading = false;
      });
    },
    // 项目成果请求封装
    refresh2() {
      this.loading = true;
      result1(this.pageSize, this.currentPage, this.keywords).then((res) => {
        // console.log(res);
        this.articles = res.data.data.records;
        this.total = res.data.data.total;
        this.loading = false;
      });
    },
    //中心简介
    refresh5() {
      this.loading = true;
      briefinfo(this.pageSize, this.currentPage, this.keywords).then((res) => {
        // console.log(res);
        this.articles = res.data.data.records;
        this.total = res.data.data.total;
        // console.log(this.articles)
        this.loading = false;
      });
    },
    handleDelete(index, row) {
      // console.log(index,row)
      // console.log(row.id)
      // console.log(row.id);
      // console.log(typeof id)
      this.$confirm("此操作将永久删除该文章, 是否继续?", "温馨提示", {
        confirmButtonText: "狠心删除",
        cancelButtonText: "取消操作",
        type: "warning",
      })
        .then(() => {
          if (this.state == -1) {
            comdel(row.id).then((res) => {
              // console.log(res);
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.refresh1();
              }
            });
          }
          // 项目成果
          if (this.state == 1) {
            resdel(row.id).then((res) => {
                if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.refresh2();
              }
            });
          }
          // 人才培养
          if (this.state == 0) {
            bendel(row.id).then((res) => {
               if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.refresh3();
              }
            });
          }
          if (this.state == 2) {
            yandel(row.id).then((res) => {
                if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.refresh4();
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      if (this.state == 0) {
        this.refresh3(this.pageSize);
      }

      //研究生
      if (this.state == 2) {
        // console.log(111+this.state)
        this.refresh4(this.pageSize);
      }
      // 合作交流
      if (this.state == -1) {
        this.refresh1(this.pageSize);
      }
      // 项目成果
      if (this.state == 1) {
        this.refresh2(this.pageSize);
      }
      // 中心概括
      if (this.state == -2) {
        this.refresh5(this.pageSize);
      }
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      // 本科生
      if (this.state == 0) {
        this.refresh3(this.currentPage);
      }
      // // 研究生
      if (this.state == 2) {
        // console.log(111+this.state)
        this.refresh4(this.currentPage);
      }
      // // 合作交流
      if (this.state == -1) {
        this.refresh1(this.currentPage);
      }
      // 项目成果
      if (this.state == 1) {
        this.refresh2(this.currentPage);
      }
      // 中心概括
      if (this.state == -2) {
        this.refresh5(this.currentPage);
      }
    },
    handleEdit(index, row) {
      // console.log(index,row);
      // console.log(row.model,row.title);
      // this.$router.push({path: '/main/articalpost', query:{id:row.id,mdcontent:row.mdcontent,title:row.title,content:row.content,model:row.model}});
      this.$router.push({ path: "/main/articaledit", query: { row: row } });
    },
  },
};
</script>
<style type="text/css">
.blog_table_footer {
  display: flex;
  box-sizing: content-box;
  padding-top: 10px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  justify-content: space-between;
}
</style>
